<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <script src="../../plugins/echarts/echarts.js"></script>
    <style scoped>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .card-detail {
            padding: 20px;
        }

        .detail-item {
            margin-bottom: 20px;
        }

        .detail-item label {
            font-weight: bold;
        }

        .card-image {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }

        .el-button--text {
            /* color: red; */
            color: lightblue;
            margin-top: 15px;
            margin-left: 30px;
        }

        .el-button--text :hover {
            color: aqua;
        }

        .dashboard {
            max-width: 1200px;
            margin: 0 auto;
        }

        .chart-container-day {
            width: 1171px;
            height: 400px;
            margin-bottom: 20px;
        }

        .chart-container-month {
            width: 1171px;
            height: 400px;
            margin-bottom: 20px;
        }

        .chart-container-year {
            width: 1171px;
            height: 400px;
            margin-bottom: 20px;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .stat-card {
            padding: 20px;
            border-radius: 4px;
            background-color: #f5f7fa;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .stat-card h3 {
            margin-top: 0;
            color: #666;
            font-size: 16px;
        }

        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
        }

        .stat-card .compare {
            font-size: 14px;
            color: #999;
        }

        .compare.positive {
            color: #67c23a;
        }

        .compare.negative {
            color: #f56c6c;
        }

        .container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 20px;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7fa;
        }


        .header {
            margin-bottom: 20px;
        }

        .total-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
        }

        .total-title {
            text-align: center;
            font-size: 16px;
            color: #666;
            margin-bottom: 10px;
        }

        .total-value {

            font-size: 28px;
            font-weight: bold;
            text-align: center;
            color: #333;
        }

        .card-stats {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-item {
            background-color: #fff;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            text-align: center;
            margin-bottom: 15px;
        }

        .stat-type {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }

        .stat-value {
            text-align: center;
            font-size: 24px;
            color: #409EFF;
            margin-bottom: 15px;
        }

        .card-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
        }

        .card-item {
            position: relative;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s ease;
            transform: translateY(0);
        }

        .card-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .delete-btn {
            position: absolute;
            top: 5px;
            right: 0px;
            width: 24px;
            height: 24px;
            background: #f56c6c;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
            z-index: 10;
            opacity: 0; /* 初始状态不可见 */
            transform: scale(0.8); /* 初始状态缩小 */
        }

        .card-item:hover .delete-btn {
            opacity: 1; /* 完全可见 */
            transform: scale(1); /* 正常大小 */
        }

        .delete-btn:hover {
            background: #f78989;
            transform: scale(1.1);
        }

        /* 过渡效果 */
        .fade-enter-active, .fade-leave-active {
            transition: all 0.3s ease;
        }

        .fade-enter, .fade-leave-to {
            opacity: 0;
            transform: scale(0.8);
        }

        .cards-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
        }

        .card-info {
            padding: 15px;
        }

        .card-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cards-stats {
            font-size: 14px;
            color: #666;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        /*去除表格滚动条*/


    </style>
</head>
<body>
<div id="stadium-detail-app">
    <div class="container">
        <!-- 店铺信息模块 -->
        <h1>店铺信息
            <el-button
                    type="primary"
                    size="small"
                    style="float: right; margin-right: 20px;"
                    @click="showEditDialog">
                修改信息
            </el-button>
        </h1>
        <el-card class="card-detail">
            <div class="detail-content">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="detail-item">
                            <label>店主名称：</label>
                            <span>{{ShopkeeperDetail.username}}</span>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="detail-item">
                            <label>店铺名称：</label>
                            <span>{{ShopkeeperDetail.shopkeeperName}}</span>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="detail-item">
                            <label>店铺等级：</label>
                            <span>{{ ShopkeeperDetail.levels }} </span>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="detail-item">
                            <label>店主电话：</label>
                            <span>{{ ShopkeeperDetail.sysUser.phone }}</span>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="detail-item">
                            <label>店主邮箱：</label>
                            <span>{{ ShopkeeperDetail.sysUser.email }}</span>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="detail-item">
                            <label>开店时间：</label>
                            <span>{{ ShopkeeperDetail.createTime }}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="detail-item">
                            <label>店铺签名：</label>
                            <span>{{ ShopkeeperDetail.remark }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
    <div class="container">
        <!-- 财务报表模块 -->
        <h1>{{ shopName }} - 经营报表</h1>
        <div class="dashboard">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="日收入统计" name="day">
                    <div style="width: 100%;height: 40px;display: flex;justify-content: space-around">
                        <div style="width: 33%;height: 100%"></div>
                        <div style="width: 33%;height: 100%;text-align: center;line-height: 40px">
                            <span style="font-size: 12px;color: #999999">
                                数据更新于{{updateDayTime}}
                            </span>
                        </div>
                        <div style="width: 33%;height: 100%;text-align: right;">
                            <!-- 年月选择器 -->
                            <el-date-picker
                                    v-model="selectedYearAndMonth"
                                    type="month"
                                    placeholder="选择年月"
                                    @change="fetchData1"
                                    :picker-options="pickerOptionMonth"></el-date-picker>
                        </div>
                    </div>
                    <!--日收入报表-->
                    <div class="chart-container-day" id="chart-income-day"></div>
                </el-tab-pane>
                <el-tab-pane label="月收入统计" name="month">
                    <div style="width: 100%;height: 40px;display: flex;justify-content: space-around">
                        <div style="width: 33%;height: 100%"></div>
                        <div style="width: 33%;height: 100%;text-align: center;line-height: 40px">
                            <span style="font-size: 12px;color: #999999">
                                数据更新于{{updateMonthTime}}
                            </span>
                        </div>
                        <div style="width: 33%;height: 100%;text-align: right;">
                            <!-- 年选择器 -->
                            <el-date-picker
                                    v-model="selectedNowYear"
                                    type="year"
                                    placeholder="选择年"
                                    @change="fetchData2"
                                    :picker-options="pickerOptionYear"></el-date-picker>
                        </div>
                    </div>
                    <!--月收入报表-->
                    <div class="chart-container-month" id="chart-income-month"></div>
                </el-tab-pane>
                <el-tab-pane label="年收入统计" name="year">
                    <div style="width: 100%;height: 40px;text-align: center;line-height: 40px;">
                        <span style="font-size: 12px;color: #999999">
                            数据更新于{{updateYearTime}}
                        </span>
                    </div>
                    <!--年收入报表-->
                    <div class="chart-container-year" id="chart-income-year"></div>
                </el-tab-pane>
            </el-tabs>
            <!-- 统计卡片 -->
            <div class="stats-container">
                <div class="stat-card" @click="viewAnnualReport(id)" style="cursor: pointer;">
                    <h3>本月收入</h3>
                    <div class="value">¥{{ formatNumber(stats.currentMonthIncome) }}</div>
                    <div class="compare" :class="stats.incomeChange >= 0 ? 'positive' : 'negative'">
                        <i :class="stats.incomeChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                        {{ Math.abs(stats.incomeChange) }}% 同比{{ stats.incomeChange >= 0 ? '增长' : '减少' }}
                    </div>
                </div>
                <div class="stat-card">
                    <h3>续费收入</h3>
                    <div class="value">¥{{ formatNumber(stats.renewIncome) }}</div>
                    <div class="compare" :class="stats.renewChange >= 0 ? 'positive' : 'negative'">
                        <i :class="stats.renewChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                        {{ Math.abs(stats.renewChange) }}% 同比{{ stats.renewChange >= 0 ? '增长' : '减少' }}
                    </div>
                </div>
                <div class="stat-card">
                    <h3>新购卡收入</h3>
                    <div class="value">¥{{ formatNumber(stats.newCardIncome) }}</div>
                    <div class="compare" :class="stats.newCardChange >= 0 ? 'positive' : 'negative'">
                        <i :class="stats.newCardChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                        {{ Math.abs(stats.newCardChange) }}% 同比{{ stats.newCardChange >= 0 ? '增长' : '减少' }}
                    </div>
                </div>
                <div class="stat-card">
                    <h3>新增会员数</h3>
                    <div class="value">{{ formatNumber(stats.newMembers) }}</div>
                    <div class="compare" :class="stats.memberChange >= 0 ? 'positive' : 'negative'">
                        <i :class="stats.memberChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                        {{ Math.abs(stats.memberChange) }}% 同比{{ stats.memberChange >= 0 ? '增长' : '减少' }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- 头部总统计 -->
        <div class="header">
            <h1>{{ shopName }} - 会员卡数据报表</h1>
        </div>
        <!-- 总会员卡统计 -->
        <div class="total-card">
            <div class="total-title">本店办理会员卡总数</div>
            <div class="total-value">{{ formatNumber(totalCards) }}张</div>
        </div>
        <!-- 两种会员卡类型统计 -->
        <div class="cards-stats">
            <div class="stat-type">次卡</div>
            <div class="stat-value">
                {{"共计办理会员卡"}}
                {{ciCard}}
                {{"张"}}
            </div>
            <div class="stat-value">
                {{"共计办卡会员"}}
                {{ciCardPeople}}
                {{"名"}}
            </div>
        </div>
        <div class="cards-stats">
            <div class="stat-type">期限卡</div>
            <div class="stat-value">
                {{"共计办理会员卡"}}
                {{(timeCard)}}
                {{"张"}}
            </div>
            <div class="stat-value">
                {{"共计办卡会员"}}
                {{timeCardPeople}}
                {{"名"}}
            </div>
        </div>
        <!-- 会员卡列表 -->
        <h2 style="margin-bottom: 20px;">会员卡列表</h2>
        <div class="card-list">
            <div class="card-item" v-for="card in cardList" :key="card.id"
                 @mouseover="hoverCardId  = card.cardId" @mouseleave="hoverCardId  = null"
                 @click="toCardDetail(card.cardId)">

                <transition name="fade">
                    <div class="delete-btn"
                         v-show="hoverCardId === card.cardId"
                         @click.stop="handleDeleteCard(card.cardId)">
                        ×
                    </div>
                </transition>
                <img :src="getImage(card.background)" alt="会员卡图片" class="cards-image">
                <div class="card-info">
                    <div class="card-name">{{ card.name }}</div>
                </div>
            </div>
            <div v-show="cardList.length===0" style="text-align: center;">
                <p>暂无会员卡信息!!!</p>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- 教师信息模块 -->
        <h1>教师信息</h1>
        <div style="margin-bottom: 20px;">
            <el-button type="primary" @click="addTeachertype('add')">+ 新建老师</el-button>
        </div>
        <!--:data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"-->
        <el-table
                :data="tableData"
                stripe class="tableBox" max-height="500px" show-summary
                :summary-method="getTeacherSummary" width="100%" border>
            <el-table-column prop="username" label="教师名称" width="100" align="center"></el-table-column>
            <el-table-column prop="levels" label="等级" width=200" align="center"></el-table-column>
            <el-table-column prop="courseList.length" label="本月课程数" align="center" width="200"></el-table-column>
            <el-table-column label="教师图片" prop="user.images" align="center" width="150">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="getImage(row.user.images)" fit="cover"
                              :preview-src-list="[row.user.images]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="user.age" label="年龄" align="center" width="50"></el-table-column>
            <el-table-column prop="user.gender" label="性别" align="center" width="50"></el-table-column>
            <el-table-column prop="user.email" label="邮箱" width="200" align="center"></el-table-column>
            <el-table-column prop="user.phone" label="手机号" width="200" align="center"></el-table-column>
            <el-table-column fixed="right" width="200" align="center">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="medium"
                            placeholder="搜索老师"
                            style="width: 150px;text-align: center;"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="blueBug"
                               @click="addTeachertype(scope.row.teacherId,'detail')"
                               v-if="true">详情编辑
                    </el-button>
                    <el-button type="text" size="small" class="blueBug delBut" @click="statusHandle(scope.row)">
                        {{ scope.row.user.status == '0' ? '启用' : '停用' }}
                    </el-button>
                    <el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--课程模块-->
        <h1 style="margin-top: 30px;">课程信息</h1>
        <el-table
                :data="courseData.filter(data => !searchCourse || data.courseName.toLowerCase().includes(searchCourse.toLowerCase()))"
                stripe style="width: 100%" max-height="500px">
            <el-table-column prop="id" label="序号" type="index" :index="indexMethod" width="50"
                             align="center"></el-table-column>
            <el-table-column prop="courseName" label="课程名称" width="100" align="center"></el-table-column>
            <el-table-column label="课程状态" width="100" align="center">
                <template #default="{ row }">
                    <el-tag :type="row.status=='上课中'?'success':(row.status=='未开始'?'warning':'danger')">
                        {{row.status}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="授课教师" width="100" align="center"></el-table-column>
            <el-table-column prop="difficulty" label="课程难度" width="100" align="center"></el-table-column>
            <el-table-column prop="duration" label="课程时长" width="100" align="center"></el-table-column>
            <el-table-column prop="type" label="课程类型" width="100" align="center"></el-table-column>
            <el-table-column prop="room" label="上课教室" width="150" align="center"></el-table-column>
            <el-table-column prop="startTime" label="开课时间" width="180" align="center"></el-table-column>
            <el-table-column prop="endTime" label="结课时间" width="180" align="center"></el-table-column>
            <el-table-column label="课程标签" width="200" align="center">
                <template #default="{ row }">
                    <el-tag
                            v-for="(tag, index) in (row?.tag || '').split(',').filter(tag => tag.trim())"
                            :key="index"
                            style="margin-right: 5px;"
                            :type="index % 3 === 0 ? 'success' : index % 3 === 1 ? 'warning' : 'info'">
                        {{ tag.trim() }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="nowPerson" label="报名人数" width="100" align="center"></el-table-column>
            <el-table-column prop="startPerson" label="开课人数" width="100" align="center"></el-table-column>
            <el-table-column prop="maxPerson" label="最大容量" width="100" align="center"></el-table-column>
            <el-table-column width="170" fixed="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="searchCourse"
                            size="small"
                            placeholder="搜索课程"/>
                </template>
                <template #default="{ row }">
                    <el-button type="warning" size="mini" @click="handleUpdateCourse(row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="handleDeleteCourse(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改店铺信息" :visible.sync="editDialogVisible" width="50%" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="120px" ref="editForm" :rules="editRules">
                <el-form-item label="店主名称" prop="name">
                    <el-input v-model="editForm.username"></el-input>
                </el-form-item>
                <el-form-item label="店铺名称" prop="name">
                    <el-input v-model="editForm.shopkeeperName"></el-input>
                </el-form-item>
                <el-form-item label="店铺等级" prop="levels">
                    <el-select v-model="editForm.levels" placeholder="请选择店铺等级">
                        <el-option label="普通" value="普通"></el-option>
                        <el-option label="银牌" value="银牌"></el-option>
                        <el-option label="金牌" value="金牌"></el-option>
                        <el-option label="钻石" value="钻石"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="店主电话" prop="phone">
                    <el-input v-model="editForm.sysUser.phone"></el-input>
                </el-form-item>
                <el-form-item label="店主邮箱" prop="email">
                    <el-input v-model="editForm.sysUser.email" type="email"></el-input>
                </el-form-item>
                <el-form-item label="店铺签名" prop="remark">
                    <el-input
                            type="textarea"
                            :rows="3"
                            v-model="editForm.remark"
                            placeholder="请输入店铺简介或签名">
                    </el-input>
                </el-form-item>

                <el-form-item label="店铺图片">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/common/upload"
                            :show-file-list="false"
                            :on-success="handleImageUpload"
                            :before-upload="beforeImageUpload">
                        <img v-if="editForm.head" :src="getImage(editForm.head)" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
    </span>
        </el-dialog>
        <el-dialog title="修改课程" :visible.sync="dialogVisible" width="30%">
            <el-form :model="form" label-width="80px">
                <el-form-item label="课程名称">
                    <el-input v-model="form.courseName"></el-input>
                </el-form-item>
                <el-form-item label="授课老师">
                    <el-select v-model="form.username" placeholder="请选择老师">
                        <el-option
                                v-for="teacher in tableData"
                                :key="teacher.teacherId"
                                :label="teacher.username"
                                :value="teacher.teacherId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程标签">
                    <el-select v-model="form.tag" multiple placeholder="请选择标签">
                        <el-option
                                v-for="tag in tagOptions"
                                :key="tag"
                                :label="tag"
                                :value="tag">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程难度">
                    <el-select v-model="form.difficulty" placeholder="请选择课程难度">
                        <el-option label="简单" value="简单"></el-option>
                        <el-option label="中等" value="中等"></el-option>
                        <el-option label="困难" value="困难"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程类型">
                    <el-select v-model="form.type" placeholder="请选择课程类型">
                        <el-option label="团课" value="团课"></el-option>
                        <el-option label="私教" value="私教"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程时长">
                    <!--                    <el-input v-model="form.duration"></el-input>-->
                    <el-input-number v-model="form.duration" :min="30" :max="150">
                    </el-input-number>
                    <span>(分钟)</span>
                </el-form-item>
                <el-form-item label="上课教室">
                    <el-input v-model="form.room"></el-input>
                </el-form-item>
                <el-form-item label="开课时间">
                    <el-date-picker type="datetime" placeholder="选择开课时间" v-model="form.startTime"
                                    style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
                <el-form-item label="报名人数">
                    <el-input v-model="form.nowPerson" disabled></el-input>
                </el-form-item>
                <el-form-item label="开课人数">
                    <el-input-number v-model="form.startPerson" :min="0" :max="500"></el-input-number>
                    <span>(人)</span>
                </el-form-item>
                <el-form-item label="最大容量">
                    <el-input-number v-model="form.maxPerson" :min="1" :max="500"></el-input-number>
                    <span>(人)</span>
                </el-form-item>
            </el-form>
            <span slot="footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitUpdate">确定</el-button>
			</span>
        </el-dialog>

        <!-- 添加底部空白区域 -->
        <div style="height: 60px;"></div>
    </div>
    <!--     这是原来的#app闭合标签 -->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<!--<script src="../../plugins/echarts/echarts.js"></script>-->
<!--<script src="../../plugins/echarts/echarts.min.js"></script>-->
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script src="../../api/shopkeeper.js"></script>
<script src="../../api/stadium.js"></script>
<script src="../../api/card.js"></script>
<script src="../../api/statistics.js"></script>
<script src="../../api/teacher.js"></script>
<script>
    let tagsOptions = [];
    new Vue({
        el: '#stadium-detail-app',
        data() {
            return {
                baseUrl: "http://127.0.0.1:9000/jiayunplus/",
                id: '', // 保存从URL中获取的id  店铺id  shopkeeperId
                shopName: 'Jiayun健身中心',
                editDialogVisible: false,
                dialogVisible: false,
                search: "",
                searchCourse: "",
                editForm: {
                    username: '',
                    shopkeeperName: '',
                    levels: '',
                    sysUser: {
                        phone: "",
                        email: ""
                    }
                },
                tableData: [{
                    username: '',
                    levels: "",
                    courseList: {},
                    user: ""
                }],
                ShopkeeperDetail: {},
                chart: null,
                ciCard: 0,
                ciCardPeople: 0,
                timeCard: 0,
                timeCardPeople: 0,
                stats: {
                    currentMonthIncome: 0,
                    renewIncome: 0,
                    newCardIncome: 0,
                    newMembers: 0,
                    incomeChange: 0,
                    renewChange: 0,
                    newCardChange: 0,
                    memberChange: 0
                },
                monthlyData: [],
                courseData: [],
                totalCards: 0,
                cardTypeStats: [],
                cardList: [],
                imageURL: '',
                imageUrl: '',
                editRules: {
                    // name: [
                    //     {required: true, message: '请输入店铺名称', trigger: 'blur'},
                    //     {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    // ],
                    // phone: [
                    //     {required: true, message: '请输入联系电话', trigger: 'blur'},
                    //     {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
                    // ],
                },
                showDeleteBtn: null,
                hoverCardId: null,
                form: { // 新增课程表单数据
                    id: '',
                    courseName: '',
                    tag: "",
                    teacherName: '',
                    count: ''
                },
                deleteForm: {
                    id: '',
                    courseName: '',
                    tag: "",
                    teacherName: '',
                    count: ''
                },
                numCardMemberCount: 0,//次卡会员数
                timeCardMemberCount: 0,//期限卡会员数
                teacherNameList: [],
                tagOptions: [], // 示例标签选项
                activeName: "day",
                //当前年月
                selectedYearAndMonth: new Date(),
                //制定选中规则
                pickerOptionMonth: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                //当前年
                selectedNowYear: new Date(),
                // 制定选中规则
                pickerOptionYear: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                //日总收入
                daysIncome: {
                    dataIncome: [],
                    dataTime: []
                },
                //月总收入
                monthsIncome: {
                    dataIncome: [],
                    dataTime: []
                },
                //年总收入
                yearsIncome: {
                    dataIncome: [],
                    dataTime: []
                },
                //更新经营报表的时间
                updateDayTime: "",
                updateMonthTime: "",
                updateYearTime: ""
            };
        },
        computed: {
            rules() {
                return {
                    'name': [{
                        'required': true,
                        'message': '请填写名称',
                        'trigger': 'blur'
                    }],

                    'price': [{
                        'required': true,
                        validator: (rules, value, callback) => {
                            if (!value) {
                                callback(new Error('请填写价格'))
                            } else {
                                const reg = /^\d+(\.\d{0,2})?$/;
                                if (reg.test(value)) {
                                    if (value < 10000) {
                                        callback()
                                    } else {
                                        callback(new Error('价格小于10000'))
                                    }
                                } else {
                                    callback(new Error('价格格式只能为数字,且最多保留两位小数'))
                                }
                            }
                        },
                        'trigger': 'blur'
                    }],
                }
            },
            currentMonth() {
                return new Date().getMonth() + 1;
            }
        },
        created() {
            const urlParams = new URLSearchParams(window.location.search);
            this.id = urlParams.get('id'); // 从URL中获取id并保存到data中
            if (!this.id) {
                console.error('未获取到shopkeeper_id');
                // 可以添加错误处理，如重定向回原页面
            }
            getTagListByType("课程").then(
                res => {
                    this.tagOptions = res.data
                }
            )
            this.init();
            this.fetchCardList();//查询会员卡列表
            this.fetchCardStats();//查询总数
            this.getTeacher();//查询老师信息
            this.getCourse();//查询课程信息
            setTimeout(() => {
                //进入页面，优先默认统计日收入
                this.initChart();
            }, 1000)
        },
        mounted() {
            this.initChart();
            this.fetchData();
            this.updateStats();
        },
        methods: {
            //选择年月，统计日收入
            fetchData1() {
                this.initChart();
            },
            //选择年，统计月收入
            fetchData2() {
                this.initChartOfMonths()
            },
            //点击，分别展示不同类型的收入
            handleClick(tab) {
                // console.log(tab);
                //选择的是什么类型的统计方式：tab.name
                console.log(tab.name)
                if (tab.name === "month") {
                    //月收入
                    this.initChartOfMonths()
                }
                if (tab.name === "year") {
                    //年收入
                    this.initChartOfYears();
                }
                if (tab.name === "day") {
                    //日收入
                    this.initChart();
                }
            },
            //序号
            indexMethod(index) {
                return index + 1;
            },
            //统计老师+课程数量
            getTeacherSummary(param) {
                const {columns, data} = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[0] = '合计';
                        return;
                    }
                    //计算老师数量
                    else if (index === 1) {
                        var teacherNum = 0;
                        data.map(item => {
                            teacherNum += 1;
                        })
                        sums[1] = "老师共计" + teacherNum + "人";
                    }
                    //计算课程总数量
                    else if (index === 2) {
                        var courseNum = 0;
                        data.map(item => {
                            courseNum += item.courseList.length;
                        })
                        sums[2] = "课程共计" + courseNum + "个";
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },
            getImage(it) {
                return this.baseUrl + "" + it
            },
            beforeImageUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleImageUpload(res, file) {
                if (res.code === 1) {
                    this.imageURL = URL.createObjectURL(file.raw);
                    // 保存服务器返回的图片路径
                    this.editForm.head = res.data;
                    this.imageUrl = `/common/download?name=${res.data}`;
                } else {
                    this.$message.error('图片上传失败');
                }
            },

            viewCourseDetail(courseId) {
                // const url = `page/shopkeeper/course-detail.html?courseId=${encodeURIComponent(courseId)}&shopkeeperId=${encodeURIComponent(shopkeeperId)}`;
                const url = `page/shopkeeper/course-detail.html?courseId=` + courseId + `&shopkeeperId=` + this.id;
                try {
                    if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
                        window.parent.safeNavigateTo(url, '课程详情', '3');
                    } else {
                        // 备用方案
                        window.location.href = url;
                    }
                } catch (error) {
                    console.error('跳转失败:', error);
                }
            },

            async init() {
                queryShopKeeperById(this.id).then(res => {
                    console.log(res);
                    if (String(res.code) === '1') {
                        this.ShopkeeperDetail = res.data
                        console.log("  this.ShopkeeperDetail:" + this.ShopkeeperDetail.sysUser.phone)
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            statusHandle(row) {
                this.$confirm(`确认${row.user.status == '0' ? '启用' : '停用'}该账号?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    enableOrDisableStatus({
                        userId: row.userId,  // 直接使用 row.id，避免中间变量
                        status: row.user.status == '0' ? 1 : 0  // 明确状态转换逻辑
                    }).then(res => {
                        if (String(res.code) === '1') {
                            this.$message.success('状态更新成功');
                            // row.user.status = row.user.status == '0' ? '1' : '0';
                            this.getTeacher();
                            // this.init(); // 刷新数据
                        } else {
                            this.$message.error(res.msg || '操作失败');
                        }
                    }).catch(err => {
                        this.$message.error('请求错误: ' + (err.message || err));
                    });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },

            addTeachertype(st, source = 'detail') {
                if (st === 'add') {
                    console.log("新增老师")
                    const url = `page/teacher/add.html?id=${encodeURIComponent(this.id)}`;
                    if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
                        window.parent.safeNavigateTo(url, '添加老师', '4');
                    } else {
                        // 备用方案
                        window.location.href = url;
                    }
                } else {
                    console.log("修改老师")
                    const url = `page/teacher/update.html?userId=${encodeURIComponent(st)}&source=${encodeURIComponent(source)}&id=${encodeURIComponent(this.id)}`;
                    if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
                        window.parent.safeNavigateTo(url, '修改老师', '4');
                    } else {
                        // 备用方案
                        window.location.href = url;
                    }
                    // window.parent.menuHandle({
                    // 	id: '4',
                    // 	url: `page/teacher/update.html?userId=${st}&source=${source}&id=${id}`,
                    // 	name: '修改老师'
                    // },true,'12',{
                    // 	userId: st,
                    // 	source: source,
                    // 	id: id
                    // })
                }
            },
            deleteHandle(row) {
                console.log(row.userId)
                this.$confirm('确认删除该老师, 是否继续?', '确定删除', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    deleteTeacher(row.user.userId).then(res => {
                        console.log(res)
                        if (res.code === 1) {
                            this.$message.success('删除成功！');
                            this.getTeacher(); // 调用获取教师列表的方法
                            isDelted = 1;
                            this.handleQuery()
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },

            selectTdetail(teacherId) {
                const url = `page/stadium/tdetail.html?id=${encodeURIComponent(teacherId)}`;
                try {
                    if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
                        window.parent.safeNavigateTo(url, '教师详情', '3');
                    } else {
                        // 备用方案
                        window.location.href = url;
                    }
                } catch (error) {
                    console.error('跳转失败:', error);
                }
            },
            getTeacher() {
                getTeachersOfShopkeeper(this.id).then(res => { //请求结果处理
                    if (res.code === 1) {
                        this.tableData = res.data.map(teacher => ({
                            ...teacher,
                            images: `/common/download?name=${teacher.user.images}`
                        }));
                    }
                })
            },
            getCourse() {
                getCourseOfShopkeeper(this.id).then(res => {
                    if (String(res.code) === '1') {
                        this.courseData = res.data
                        console.log(this.courseData)
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            viewAnnualReport() {
                const url = `page/stadium/annual-report.html?id=${encodeURIComponent(this.id)}`;
                try {
                    if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
                        window.parent.safeNavigateTo(url, '年收益统计', '3');
                    } else {
                        // 备用方案
                        window.location.href = url;
                    }
                } catch (error) {
                    console.error('跳转失败:', error);
                }
            },


            handleCheckAllChange(val) {
                this.ruleForm.tags = val ? tagsOptions : []
                this.isIndeterminate = false;
                console.log(this.ruleForm.tags)

            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.tags.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
                this.ruleForm.tags = value
                console.log(this.ruleForm.tags)
            },

            handleAvatarSuccess(response, file, fileList) {
                // 拼接down接口预览
                if (response.code === 0 && response.msg === '未登录') {
                    window.top.location.href = '../login/login.html'
                } else {
                    this.imageUrl = `/common/download?name=${response.data}`;
                    this.ruleForm.image = response.data
                }
            },

            onChange(file) {
                if (file) {
                    const suffix = file.name.split('.')[1];
                    const size = file.size / 1024 / 1024 < 2;
                    if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！');
                        this.$refs.upload.clearFiles();
                        return false
                    }
                    if (!size) {
                        this.$message.error('上传文件大小不能超过 2MB!');
                        return false
                    }
                    return file
                }
            },

            //统计日收入  统计 某年某月 的收入，每日的详情收入情况
            initChart() {
                try {
                    //传递参数 年、月、店铺id，调用方法，查询收入情况
                    const params = {
                        //日
                        // day: this.selectedYearAndMonth.getFullYear(),
                        //年
                        year: this.selectedYearAndMonth.getFullYear(),
                        //月
                        month: this.selectedYearAndMonth.getMonth() + 1,
                        //店铺id
                        shopkeeperId: this.id
                    }
                    getIncome(params).then(res => {
                        if (res.code === 1) {
                            console.log("查询到日收入--------------")
                            console.log(res.data)
                            //将获取到的数据进行赋值
                            //本月有多少天就统计多少个数据
                            var data1 = [];//存储x轴的值，即为月份
                            var data2 = [];//存储y轴的值，即为日收入
                            //判断是本年本月还是其他月份？
                            var nowYear = new Date().getFullYear();
                            var nowMonth = new Date().getMonth() + 1
                            //如果是本年本月,查询即可
                            if (params.year === nowYear && params.month === nowMonth) {
                                for (let i = 1; i <= new Date().getDate(); i++) {
                                    for (let j = 0; j < res.data.length; j++) {
                                        //如果遍历到有该天的收入信息，则加入数组
                                        if (i.toString() === res.data[j].incomeDay) {
                                            data1.push(i);
                                            data2.push(res.data[j].income)
                                            break;
                                        }
                                        //如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
                                        if ((j + 1) === res.data.length) {
                                            data1.push(i);
                                            data2.push(0)
                                        }
                                    }
                                }
                                //赋值给日收入和月份
                                this.daysIncome.dataTime = data1
                                this.daysIncome.dataIncome = data2

                                console.log("计算出的日收入情况：---------")
                                console.log(data1)
                                console.log(data2)
                            } else {
                                //如果不是本年本月，那么需要统计一整月的数据，所以就需要知道当前月有多少天
                                for (let i = 1; i <= new Date(params.year, params.month, 0).getDate(); i++) {
                                    for (let j = 0; j < res.data.length; j++) {
                                        //如果遍历到有该天的收入信息，则加入数组
                                        if (i.toString() === res.data[j].incomeDay) {
                                            data1.push(i);
                                            data2.push(res.data[j].income)
                                            break;
                                        }
                                        //如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
                                        if ((j + 1) === res.data.length) {
                                            data1.push(i);
                                            data2.push(0)
                                        }
                                    }
                                }
                                //赋值给日收入和月份
                                this.daysIncome.dataTime = data1
                                this.daysIncome.dataIncome = data2

                                console.log("计算出的日收入情况：---------")
                                console.log(data1)
                                console.log(data2)
                            }
                            //报表显示
                            var myChart = echarts.init(document.getElementById('chart-income-day'));
                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                        data: this.daysIncome.dataTime,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '收入',
                                        type: 'bar',
                                        barWidth: '60%',
                                        // data: [100, 520, 20, 334, 690, 330, 220]
                                        data: this.daysIncome.dataIncome
                                    }
                                ]
                            };
                            myChart.setOption(option);
                            //完毕之后，返回更新数据的时间
                            this.updateDayTime = new Date().toLocaleString()
                            // this.initChart();
                        } else {
                            this.$message.error(res.msg || '获取数据失败');
                        }
                    })
                } catch (err) {
                    this.$message.error('请求出错: ' + err.message);
                }
            },
            //统计月收入  统计 某年每个月的收入，每月的详情收入情况
            initChartOfMonths() {
                try {
                    //传递参数 年、月、店铺id，调用方法，查询收入情况
                    const params = {
                        //年
                        year: this.selectedNowYear.getFullYear(),
                        //店铺id
                        shopkeeperId: this.id
                    }
                    getIncome(params).then(res => {
                        if (res.code === 1) {
                            console.log("查询到日收入--------------")
                            console.log(res.data)
                            //将获取到的数据进行赋值
                            //本月有多少天就统计多少个数据
                            var data1 = [];//存储x轴的值，即为月份
                            var data2 = [];//存储y轴的值，即为日收入
                            //判断是本年还是其他年？
                            var nowYear = new Date().getFullYear();
                            //如果是本年,查询即可
                            if (params.year === nowYear) {
                                for (let i = 1; i <= new Date().getMonth() + 1; i++) {
                                    for (let j = 0; j < res.data.length; j++) {
                                        //如果遍历到有该天的收入信息，则加入数组
                                        if (i.toString() === res.data[j].incomeMonth) {
                                            data1.push(i);
                                            data2.push(res.data[j].income)
                                            break;
                                        }
                                        //如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
                                        if ((j + 1) === res.data.length) {
                                            data1.push(i);
                                            data2.push(0)
                                        }
                                    }
                                }
                                //赋值给日收入和月份
                                this.monthsIncome.dataTime = data1
                                this.monthsIncome.dataIncome = data2
                                console.log("计算出的月收入情况：---------")
                                console.log(data1)
                                console.log(data2)
                            } else {
                                //如果不是本年，那么需要统计一整年的数据
                                for (let i = 1; i <= 12; i++) {
                                    for (let j = 0; j < res.data.length; j++) {
                                        //如果遍历到有该天的收入信息，则加入数组
                                        if (i.toString() === res.data[j].incomeMonth) {
                                            data1.push(i);
                                            data2.push(res.data[j].income)
                                            break;
                                        }
                                        //如果到了最后一位了，还没赋值，则说明这个月无收入的相关数据，则赋值为0
                                        if ((j + 1) === res.data.length) {
                                            data1.push(i);
                                            data2.push(0)
                                        }
                                    }
                                }
                                //赋值给日收入和月份
                                this.monthsIncome.dataTime = data1
                                this.monthsIncome.dataIncome = data2

                                console.log("计算出的日收入情况：---------")
                                console.log(data1)
                                console.log(data2)
                            }
                            //报表显示
                            var myChart = echarts.init(document.getElementById('chart-income-month'));
                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                        data: this.monthsIncome.dataTime,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis: [{type: 'value'}],
                                series: [{
                                    name: '收入',
                                    type: 'bar',
                                    barWidth: '60%',
                                    // data: [100, 520, 20, 334, 690, 330, 220]
                                    data: this.monthsIncome.dataIncome
                                }]
                            };
                            myChart.setOption(option);
                            this.updateMonthTime = new Date().toLocaleString()
                            // this.initChart();
                        } else {
                            this.$message.error(res.msg || '获取数据失败');
                        }
                    })
                } catch (err) {
                    this.$message.error('请求出错: ' + err.message);
                }
            },
            //统计年收入  统计近几年的收入情况
            initChartOfYears() {
                try {
                    //传递参数 年、月、店铺id，调用方法，查询收入情况
                    const params = {
                        //店铺id
                        shopkeeperId: this.id
                    }
                    getIncome(params).then(res => {
                        if (res.code === 1) {
                            console.log("查询到年收入--------------")
                            console.log(res.data)
                            var data1 = [];//存储x轴的值，即为年
                            var data2 = [];//存储y轴的值，即为总收入
                            //获取当前年
                            var fullYear = new Date().getFullYear();
                            //查询近五年的收入情况
                            for (let i = fullYear - 4; i <= fullYear; i++) {
                                for (let j = 0; j < res.data.length; j++) {
                                    //如果遍历到该年收入信息，则加入数组
                                    if (i.toString() === res.data[j].incomeYear) {
                                        data1.push(i);
                                        data2.push(res.data[j].income)
                                        break;
                                    }
                                    //如果到了最后一位了，还没赋值，则说明本年无收入的相关数据，则赋值为0
                                    if ((j + 1) === res.data.length) {
                                        data1.push(i);
                                        data2.push(0)
                                    }
                                }
                            }
                            //赋值给日收入和月份
                            this.yearsIncome.dataTime = data1
                            this.yearsIncome.dataIncome = data2

                            console.log("计算出的月收入情况：---------")
                            console.log(data1)
                            console.log(data2)

                            //报表显示
                            var myChart = echarts.init(document.getElementById('chart-income-year'));
                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                        data: this.yearsIncome.dataTime,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '收入',
                                        type: 'bar',
                                        barWidth: '60%',
                                        // data: [100, 520, 20, 334, 690, 330, 220]
                                        data: this.yearsIncome.dataIncome
                                    }
                                ]
                            };
                            myChart.setOption(option);
                            this.updateYearTime = new Date().toLocaleString()
                            // this.initChart();

                        } else {
                            this.$message.error(res.msg || '获取数据失败');
                        }
                    })
                } catch
                    (err) {
                    this.$message.error('请求出错: ' + err.message);
                }
            },
            //获取收入数据信息
            async fetchData() {
                try {
                    //传递参数
                    const res = await getIncome({
                        //下拉框中选择的数据
                        time: this.selectedTime,
                        //店铺id
                        id: this.id
                    });
                    if (res.code === 1) {

                        this.initChart();
                    } else {
                        this.$message.error(res.msg || '获取数据失败');
                    }
                } catch (err) {
                    this.$message.error('请求出错: ' + err.message);
                }
            },
            // 处理月份数据
            processMonthlyData(data) {

                // const now = new Date();
                // const currentYear = now.getFullYear();
                // const currentMonth = now.getMonth() + 1;
                // const allMonths = Array.from({length: 12}, (_, i) => {
                //     const month = i + 1;
                //     return {
                //         month: `${month}月`,
                //         income: 0,
                //         isCurrent: this.selectedYear === currentYear && month === currentMonth
                //     };
                // });

                // 	填充实际数据
                // data.forEach(item => {
                //     const monthNum = parseInt(item.month.replace('月', ''));
                //     const index = monthNum - 1;
                //     allMonths[index].income = item.income;
                //     allMonths[index].isCurrent = this.selectedYear === currentYear && monthNum === currentMonth;
                // });

                // return allMonths;
            },
            async updateStats() {
                try {
                    const res = await getMonthlyStats({id: this.id});
                    if (res.code === 1) {
                        this.stats = {
                            currentMonthIncome: res.data.currentMonthIncome || 0,
                            renewIncome: res.data.renewIncome || 0,
                            newCardIncome: res.data.newCardIncome || 0,
                            newMembers: res.data.newMembers || 0,
                            incomeChange: res.data.incomeChange || 0,
                            renewChange: res.data.renewChange || 0,
                            newCardChange: res.data.newCardChange || 0,
                            memberChange: res.data.memberChange || 0
                        };
                    }
                } catch (err) {
                    console.error('获取统计数据失败:', err);
                }
            },
            // 柱状图配置
            updateChart() {
                const option = {
                    title: {
                        text: `${this.selectedYear}年月度营业额`,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>营业额: ¥{c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.monthlyData.map(item => item.month)
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '¥{value}'
                        }
                    },
                    series: [{
                        data: this.monthlyData.map(item => ({
                            value: item.income,
                            itemStyle: {
                                color: item.isCurrent ? '#67C23A' : '#409EFF' // 当前月份绿色高亮
                            }
                        })),
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                            formatter: params => params.value ?
                                `¥${this.formatNumber(params.value)}` : ''
                        },
                        emphasis: { // 鼠标悬停效果
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                this.chart.setOption(option);
            },
            formatNumber(num) {
                return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            },
            fetchCardStats() {
                getCardStats({id: this.id})
                    .then(res => {
                        if (res.code === 1) {
                            //返回卡类型及办理情况信息
                            this.cardTypeStats = res.data || {};
                            //计算本店铺所办理的所有会员卡数量
                            this.totalCards = res.data.allCount;
                            this.timeCard = res.data.timeCard;
                            this.timeCardPeople = res.data.timeCardPeople;
                            this.ciCard = res.data.ciCard;
                            this.ciCardPeople = res.data.ciCardPeople;

                            //获取次卡会员数量  numCardMemberCount
                            // if (res.data.numCard !== null) {
                            //     var num1 = []
                            //     for (var i = 0; i < res.data.numCard.length; i++) {
                            //         console.log(res.data.numCard[i]);
                            //         if (!num1.includes(res.data.numCard[i].memberId)) {
                            //             num1.push(res.data.numCard[i].memberId);
                            //         }
                            //     }
                            //     //赋值
                            //     this.numCardMemberCount = num1.length;
                            // } else {
                            //     this.numCardMemberCount = 0
                            // }
                            /*---------------------------------------------------------------------------*/
                            //获取期限卡会员数量  timeCardMemberCount
                            // if (res.data.timeCard !== null) {
                            //     var num2 = [];
                            //     for (var i = 0; i < res.data.timeCard.length; i++) {
                            //         if (!num2.includes(res.data.timeCard[i].memberId)) {
                            //             num2.push(res.data.timeCard[i].memberId);
                            //         }
                            //     }
                            //     //赋值
                            //     this.timeCardMemberCount = num2.length;
                            // } else {
                            //     this.timeCardMemberCount = 0
                            // }
                        }
                    })
            },
            //获取会员卡列表
            fetchCardList() {
                getCards({id: this.id}).then(res => {
                    if (res.code === 1) {
                        this.cardList = res.data.map(card => ({
                            ...card,
                            background: card.background
                        }));
                        console.log(this.cardList);
                    }
                })
            },
            toCardDetail(id) {
                const url = `page/shopkeeper/cardDetail.html?cardId=${encodeURIComponent(id)}`;
                try {
                    if (window.parent && typeof window.parent.safeNavigateTo === 'function') {
                        window.parent.safeNavigateTo(url, '会员卡详情', '3');
                    } else {
                        // 备用方案
                        window.location.href = url;
                    }
                } catch (error) {
                    console.error('跳转失败:', error);
                }

            },
            handleUpdateCourse(row) {
                this.form = {
                    ...row, // 展开所有课程属性
                    tag: row.tag ? row.tag.split(',') : [] // 保持标签处理逻辑
                };
                console.log(this.form)
                this.dialogVisible = true;
            },
            submitUpdate() {
                // 构造符合后端接口的参数格式
                const params = {
                    ...this.form,
                    tag: this.form.tag.toString(),
                };
                console.log(params)
                updateCourse(params).then(res => {
                    if (res.code === 1) {
                        this.$message.success('修改成功');
                        this.dialogVisible = false;
                        this.getCourse(); // 强制刷新课程数据
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },
            handleDeleteCourse(row) { // 使用正确的courseId参数名
                this.deleteForm = {
                    ...row, // 展开所有课程属性
                    tag: row.tag ? row.tag.split(',') : [] // 保持标签处理逻辑
                };
                const params = {
                    ...this.deleteForm,
                    tag: this.deleteForm.tag.toString(),
                };
                this.$confirm('确定要删除该课程吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteCourse(params).then(res => { // 传递正确的courseId
                        if (res.code === 1) {
                            this.$message.success('删除成功');
                            this.getCourse();
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                }).catch(() => {
                });
            },
            handleHideCourse(courseId) {
                this.$confirm('确定要隐藏该课程吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    hideCourse(courseId).then(res => { // 确保调用 statistics.js 中的 hideCourse 方法
                        if (res.code === 1) {
                            this.$message.success('隐藏成功');
                            this.getCourse(); // 刷新课程列表
                        } else {
                            this.$message.error(res.msg || '隐藏失败');
                        }
                    }).catch(err => {
                        this.$message.error('请求出错: ' + err.message);
                    });
                }).catch(() => {
                });
            },
            showEditDialog() {
                this.editDialogVisible = true;
                queryShopKeeperById(this.id).then(res => {
                    if (String(res.code) === '1') {
                        this.editForm = res.data;
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            submitEditForm() {
                console.log(this.editForm)
                this.$refs.editForm.validate(valid => {
                    if (valid) {
                        updateShopkeeperInfo({
                            ...this.editForm
                        }).then(res => {
                            if (res.code === 1) {
                                this.$message.success('修改成功');
                                this.ShopkeeperDetail = {
                                    ...this.ShopkeeperDetail,
                                    ...this.editForm
                                };
                                this.editDialogVisible = false;
                            } else {
                                this.$message.error(res.msg || '修改失败');
                            }
                        }).catch(err => {
                            this.$message.error('请求失败');
                            console.error(err);
                        });
                    } else {
                        this.$message.error('表单验证失败');
                        return false;
                    }
                });
            },
            handleDeleteCard(cardId) {
                this.$confirm('确定要删除此会员卡吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteCard({
                        cardId: cardId
                    }).then(res => {
                        if (res.code === 1) {
                            this.$message.success('删除成功');
                            this.fetchCardList(); // 重新加载列表
                        } else {
                            this.$message.error(res.msg || '删除失败');
                        }
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
        }
    })
</script>
</body>
</html>